<template>
  <div class="bind">
    <div class="title">绑定手机号</div>
    <div class="prompt">
      绑定您的手机号后即可开始使用。绑定成功后，下次扫码即可直接进入。
    </div>
    <m-form ref="form" :model="formData" :rules="rules" style="width: 439px;">
      <m-form-item prop="mobile">
        <m-input v-model="formData.mobile" placeholder="请输入手机号码">
          <img
            slot="prefix"
            src="~/assets/images/login-mobile-icon.png"
            alt=""
            style="width: 15px; height: 22px;"
          />
        </m-input>
      </m-form-item>
      <m-form-item prop="msg">
        <div
          style="width: 100%; display: flex; justify-content: space-between;"
        >
          <m-input
            style="width: 300px;"
            v-model="formData.sms_code"
            placeholder="请输入短信验证码"
          >
            <img
              slot="prefix"
              src="~/assets/images/login-msg-icon.png"
              alt=""
              style="width: 16px; height: 14px;"
            />
          </m-input>
          <m-button width="130" @click="phoneCaptcha">{{ content }}</m-button>
        </div>
      </m-form-item>
      <m-form-item style="margin-top: 80px;">
        <div style="display: flex; justify-content: center;">
          <m-button width="235" @click="handleClick">登录</m-button>
        </div>
      </m-form-item>
    </m-form>
  </div>
</template>

<script>
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MInput from "@/components/common/m-input/MInput"
import MButton from "@/components/common/m-button/MButton"
import { mobile } from "@/utils/validates"
import { getPhoneCaptcha, apiwxLogin } from "@/request/api"
import { mapMutations } from "vuex"

export default {
  name: "Bind",
  components: { MForm, MFormItem, MInput, MButton },
  data() {
    return {
      formData: {},
      rules: {
        mobile: [{ validator: mobile, trigger: "blur" }],
        sms_code: [{ required: true, message: "请输入短信验证码", trigger: "blur" }]
      },
      flag: false,
      content: "获取短信验证码",
      totalTime: 60
    };
  },
  methods: {
    ...mapMutations(["login", "setUserInfo", "setAccessToken"]),
    handleClick() {
      const code = this.$route.query.code
      const state = this.$route.query.state
      this.$refs.form.$refs.mForm.validate(rs => {
        if (rs && code && state) {
          const params = {
            code,
            state,
            sms_code: this.formData.sms_code,
            phone: this.formData.mobile
          }
          apiwxLogin(params).then(res => {
            this.setUserInfo(res.data.user)
            this.setAccessToken(res.data.token)
            this.login()
            this.$toast.show("登录成功!", 1000, false)
            this.$router.push("/home")
          }).catch(err => {
            this.$message.error(err.message)
          })
        }
      })
    },
    phoneCaptcha() {
      let that = this
      let phone = this.formData.mobile
      if (!phone) {
        that.$toast.show("请填写手机号", 1000, false)
      } else if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[1,7]))\d{8}$/.test(phone)) {
        that.$toast.show("请填写正确的手机号", 1000, false)
      } else {
        getPhoneCaptcha({
          phone: this.formData.mobile,
          type: "login"
        }).then(res => {
          if (res.status === 200) {
            this.flag = true
            this.content = this.totalTime + "s后重新发送"
            let clock = window.setInterval(() => {
              this.totalTime--
              this.content = this.totalTime + "s后重新发送"
              if (this.totalTime < 0) {
                window.clearInterval(clock)
                this.content = "重新发送验证码"
                this.totalTime = 60
                this.flag = false
              }
            }, 1000)
          } else {
            that.$toast.show(res.message, 1000, false)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.bind {
  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    color: $theme-color-1;
    font-size: 22px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .prompt {
    width: 439px;
    color: $theme-color-1;
    margin-bottom: 60px;
  }
}
</style>
